<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.task_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-tooltip content="批量启动所选的定时任务" placement="top">
          <el-button type="success"
                     size="small"
                     plain
                     v-if="permission.task_start"
                     @click="handleStart">批量启动
          </el-button>
        </el-tooltip>
        <el-tooltip content="批量停止所选的定时任务" placement="top">
          <el-button type="warning"
                     size="small"
                     plain
                     v-if="permission.task_stop"
                     @click="handleStop">批量停止
          </el-button>
        </el-tooltip>
<!--        <el-tooltip content="批量重启所选的定时任务" placement="top">-->
<!--          <el-button type="primary"-->
<!--                     size="small"-->
<!--                     plain-->
<!--                     v-if="permission.task_restart"-->
<!--                     @click="handleRestart">批量重启-->
<!--          </el-button>-->
<!--        </el-tooltip>-->
      </template>
      <template slot="cronExpressionForm" slot-scope="scope">
        <div class="cron">
          <el-popover v-model="cronPopover">
            <cron i18n="cn" @change="changeCron" @close="cronPopover=false"/>
            <el-input
              slot="reference"
              v-model="form.cronExpression"
              placeholder="请输入定时策略"
              @click="cronPopover=true"/>
          </el-popover>
        </div>
      </template>
      <template slot="menu" slot-scope="{row,index,size,type}">
        <el-button
          v-if="permission.task_start"
          icon="el-icon-caret-right"
          plain
          @click="start(row, index)"
          :size="size"
          :type="type">启动
        </el-button>
        <!--      </template>-->
        <!--      <template slot="menu" slot-scope="{row,index,size,type}">-->
        <el-button
          v-if="permission.task_stop"
          icon="el-icon-circle-close"
          plain
          @click="stop(row, index)"
          :size="size"
          :type="type">停止
        </el-button>
        <!--      </template>-->
        <!--      <template slot="menu" slot-scope="{row,index,size,type}">-->
<!--        <el-button-->
<!--          v-if="permission.task_restart"-->
<!--          plain-->
<!--          @click="restart(row, index)"-->
<!--          :size="size"-->
<!--          :type="type">重启-->
<!--        </el-button>-->
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove, start,stop,restart} from "@/api/system/task";
  import {mapGetters} from "vuex";
  import {cron} from 'vue-cron'
  // import jobLog from "./job-log";
  export default {
    components: {cron},
    data() {
      return {
        form: {},
        cronPopover: false,
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          menuWidth: 300,
          labelWidth: 150,
          // gutter:100,
          height: 'auto',
          calcHeight: 230,
          searchShow: true,
          searchMenuSpan: 6,
          assBtn: true,
          tip: false,
          border: true,
          // index: true,
          viewBtn: true,
          // delBtn: true,
          selection: true,
          align: 'center',//居中
          stripe: true,//斑马纹
          dialogDrag: true,//弹框课拖拽
          column: [
            // {
            //   label: "主键",
            //   prop: "id",
            //   rules: [{
            //     required: true,
            //     message: "请输入主键",
            //     trigger: "blur"
            //   }]
            // },
            {
              label: "任务类型",
              prop: "jobType",
              type: 'select',
              dicData: [
                {
                  label: 'java类',
                  value: 1
                },
                {
                  label: 'spring bean',
                  value: 2
                },
                // {
                //   label: 'Rest 调用',
                //   value: 3
                // },
                // {
                //   label: 'jar',
                //   value: 4
                // },
                // {
                //   label: '其他',
                //   value: 5
                // }
              ],
              rules: [{
                required: true,
                message: "请输入任务类型",
                trigger: "blur"
              }]
            },
            {
              label: "任务名称",
              prop: "jobName",
              search: true,
              minWidth: 150,
              rules: [{
                required: true,
                message: "请输入任务名称",
                trigger: "blur"
              }]
            },
            {
              label: "任务分组",
              prop: "jobGroupName",
              search: true,
              rules: [{
                required: true,
                message: "请输入任务分组",
                trigger: "blur"
              }]
            },

            {
              label: "方法名称",
              prop: "methodName",
              rules: [{
                required: true,
                message: "请输入要执行的方法",
                trigger: "blur"
              }]
            },
            {
              label: "方法参数",
              prop: "methodParameters",
              rules: [{
                // required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "cron表达式",
              prop: "cronExpression",
              rules: [{
                required: true,
                message: "请输入cron表达式",
                trigger: "blur"
              }]
            },
            // {
            //   label: '错失策略',
            //   prop: 'misfirePolicy',
            //   type: 'select',
            //   dicData: [
            //     {
            //       label: '错失周期立即执行',
            //       value: 2
            //     },
            //     {
            //       label: '错失周期执行一次',
            //       value: 1
            //     },
            //     {
            //       label: '下周期执行',
            //       value: 0
            //     }
            //   ],
            //   rules:
            //     [{
            //       // required: true,
            //       message: '请输入任务错失执行策略',
            //       trigger: 'blur'
            //     }]
            // },
            {
              label: "任务状态",
              prop: "status",
              addDisplay: false,
              editDisplay: false,

              dicData: [
                {
                  label: '暂停中',
                  value: 0
                },
                {
                  label: '运行中',
                  value: 1
                },
              ],
            },
            {
              label: "任务描述",
              prop: "description",
              type: 'textarea',
              span: 24,
              overHidden: true,
              rules: [{
                // required: true,
                message: "请输入任务描述",
                trigger: "blur"
              }]
            },
            // {
            //   label: "任务开始时间",
            //   prop: "jobStartTime",
            //   rules: [{
            //     required: true,
            //     message: "请输入任务开始时间",
            //     trigger: "blur"
            //   }]
            // },
            // {
            //   label: "任务结束时间",
            //   prop: "jobEndTime",
            //   rules: [{
            //     required: true,
            //     message: "请输入任务结束时间",
            //     trigger: "blur"
            //   }]
            // },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.task_add, false),
          viewBtn: this.vaildData(this.permission.task_view, false),
          delBtn: this.vaildData(this.permission.task_delete, false),
          editBtn: this.vaildData(this.permission.task_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      //启动任务
      start(row) {
        start(row.id).then(res => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, error => {
          window.console.log(error);
        });
      },
      //批量启动
      handleStart() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定启动选择的任务?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return start(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      //停止任务
      stop(row) {
        stop(row.id).then(res => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, error => {
          window.console.log(error);
        });
      },
      //批量停止
      handleStop() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定停止选择的任务?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return stop(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      //重启任务
      restart(row) {
        restart(row.id).then(res => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        }, error => {
          window.console.log(error);
        });
      },
      //批量重启
      handleRestart() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定重启选择的任务?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return restart(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      changeCron(val) {
        this.form.cronExpression = val
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
          console.log(data)
        });
      }
    }
  };
</script>

<style>
</style>
